<!-- 费用参数配置 -->
<template>
  <div class="cost-configuration">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-select size="mini" filterable v-model="formData.customerId" @visible-change="selectStar" @change="myChange" placeholder="用箱人">
            <el-option label="标准费用" value="0"></el-option>
            <el-option v-for="item in userInfo" :key="item.ID" :label="item.search" :value="item.UserId"></el-option>
          </el-select>
          <el-form-item>
            <el-input v-model="formData.money" @input="setServiceFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="searchShipAgencyFeeList()"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="searchShipAgencyFeeList()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :row-key='getRowKeys'
      @cell-click="setmyFees"
      :expand-row-keys="expands"
      @expand-change="getshipComList"
      :cell-style="tableRowClass"
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            border
            :cell-style="tableRowClass"
            :data="props.row.boatCompany"
            @cell-click="setFees"
            style="width: 100%">
            <el-table-column
              label="船公司"
              prop="nameCn"
              align="center">
            </el-table-column>
            <el-table-column
              label="打单费"
              align="center">
              <el-table-column
                align="center"
                label="收入">
                <template slot-scope="scope">
                  <el-popover :ref="scope.row.nameCn"  trigger="click" placement="top" width="300">
                    <el-input size="mini" clearable style="width: 60%" v-model="comFee"></el-input>
                    <div style="text-align: right; margin: 0; display: inline-block;">
                      <el-button size="mini" type="primary" icon="el-icon-check" @click="setComFee(scope.row, props.row, 0)"></el-button>
                      <el-button size="mini" icon="el-icon-close" @click="cancelCol_ship(scope.row.nameCn)"></el-button>
                    </div>
                    <div slot="reference">
                      {{scope.row.importBillFee || '-'}}
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="支出">
                <template slot-scope="scope">
                  <el-popover :ref="scope.row.BoatCompanyFeeId"  trigger="click" placement="top" width="300">
                    <el-input size="mini" clearable style="width: 60%" v-model="comFee"></el-input>
                    <div style="text-align: right; margin: 0; display: inline-block;">
                      <el-button size="mini" type="primary" icon="el-icon-check" @click="setComFee(scope.row, props.row, 1)"></el-button>
                      <el-button size="mini" icon="el-icon-close" @click="cancelCol_ship(scope.row.BoatCompanyFeeId)"></el-button>
                    </div>
                    <div slot="reference">
                      {{scope.row.expndBillFee || '-'}}
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              align="center"
              label="提箱费">
              <el-table-column
                align="center"
                label="20(默认)">
                <template slot-scope="scope">
                  <el-popover :ref="scope.row.boatComId"  trigger="click" placement="top" width="300">
                    <el-input size="mini" clearable style="width: 60%" v-model="comFee"></el-input>
                    <div style="text-align: right; margin: 0; display: inline-block;">
                      <el-button size="mini" type="primary" icon="el-icon-check" @click="setComFee(scope.row, props.row, 2)"></el-button>
                      <el-button size="mini" icon="el-icon-close" @click="cancelCol_ship(scope.row.boatComId)"></el-button>
                    </div>
                    <div slot="reference">
                      {{scope.row.pickBoxFee20 || '-'}}
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="40(默认)">
                <template slot-scope="scope">
                  <el-popover :ref="scope.row.code"  trigger="click" placement="top" width="300">
                    <el-input size="mini" clearable style="width: 60%" v-model="comFee"></el-input>
                    <div style="text-align: right; margin: 0; display: inline-block;">
                      <el-button size="mini" type="primary" icon="el-icon-check" @click="setComFee(scope.row, props.row, 3)"></el-button>
                      <el-button size="mini" icon="el-icon-close" @click="cancelCol_ship(scope.row.code)"></el-button>
                    </div>
                    <div slot="reference">
                      {{scope.row.pickBoxFee40 || '-'}}
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="45(默认)">
                <template slot-scope="scope">
                  <el-popover :ref="scope.row.nameCncode"  trigger="click" placement="top" width="300">
                    <el-input size="mini" clearable style="width: 60%" v-model="comFee"></el-input>
                    <div style="text-align: right; margin: 0; display: inline-block;">
                      <el-button size="mini" type="primary" icon="el-icon-check" @click="setComFee(scope.row, props.row, 4)"></el-button>
                      <el-button size="mini" icon="el-icon-close" @click="cancelCol_ship(scope.row.nameCncode)"></el-button>
                    </div>
                    <div slot="reference">
                      {{scope.row.pickBoxFee45 || '-'}}
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="详细">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="boxingFeeX(scope.row, props.row.shipAgencyId)"></el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <!-- <el-select size="mini" filterable v-model="boatCompany" placeholder="请选择关联船公司">
            <el-option v-for="item in companyList" :key="item.id" :label="item.nameCncode" :value="item.boatComId"></el-option>
          </el-select> -->
          <!-- <el-button type="primary" size="mini" @click="setBoatCompany(props.row)">确 定</el-button> -->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="船代">
        <template slot-scope="scope">
          {{scope.row.text}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="放箱协议费">
        <template slot-scope="scope">
          <el-popover trigger="click" :ref="scope.row.id" placement="top" width="300">
            <el-input size="mini" clearable style="width: 60%" v-model="myFee"></el-input>
            <div style="text-align: right; margin: 0; display: inline-block;">
              <el-button size="mini" type="primary" icon="el-icon-check" @click="setFee(scope.row, 2)"></el-button>
              <el-button size="mini" icon="el-icon-close" @click="cancelCol(scope.row.id)"></el-button>
            </div>
            <div slot="reference" class="name-wrapper">
              {{scope.row.fee || '无'}}
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!-- 放箱费维护 -->
    <boxing-fee-dialog :customerid="customerid" :shipId="shipId" :importExport="importExport" :yardList="yardList" :yardCom="yardCom"></boxing-fee-dialog>
  </div>
</template>

<script>
import {
  shipAgencyFeeList,
  setShipAgencyFee,
  boatCompanyList,
  yardList,
  serviceFee,
  setComFee,
  getServiceFee,
  setboatCompany
} from './api/finance'
import {
  SearchUserInfo
} from '../cpInfoMan/api/customerManagement'
import BoxingFeeDialog from './dialog/BoxingFeeDialog'
export default {
  components: {
    BoxingFeeDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        customerId: '0',
        money: '',
        searchMent: ''
      },
      customerid: '',
      expands: [],
      getRowKeys (row) {
        return row.id
      },
      importExport: 0,
      userInfo: [],
      myFee: '', // 费用
      shipId: '', // 船代ID
      comFee: '', // 船公司费用
      boatCompany: '', // 船公司
      yardCom: {}, // 船公司信息
      entexpands: [],
      loading: true,
      companyYardData: [], // 关联的船公司和堆场
      shipCompanyData: [], // 关联的船代和船公司
      companyList: [], // 船公司列表
      yardList: [] // 堆场列表
    }
  },
  mounted () {
    this.getshipAgencyFeeList(2)
    this.SearchUserInfo()
    this.getCompanyList()
    this.getYardList()
    this.getServiceFee(2)
  },
  methods: {
    // 获取船代费用
    async getshipAgencyFeeList (mo) {
      this.loading = true
      const res = await shipAgencyFeeList({
        customerId: this.formData.customerId,
        import: mo
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 获取船代下船公司列表
    async getshipComList (row, expandedRows) {
      let that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.id)
        }
      } else {
        that.expands = []
      }
    },
    // 获取服务费
    async getServiceFee (imo) {
      const res = await getServiceFee({
        import: imo,
        customerId: this.formData.customerId
      })
      if (res.status === 200) {
        this.importExport = imo
        if (res.data.length === 0) {
          this.formData.money = ''
        } else {
          this.formData.money = parseFloat(res.data[0].money)
        }
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 设置放箱协议费用
    async setFee (row, mo) {
      if (/^[0-9]+\d*(\.\d{0,2})?$|^0?\.\d{0,2}$/.test(this.myFee)) {
      } else {
        this.$message({
          message: '请输入正确的费用格式',
          type: 'warning'
        })
        return false
      }
      const res = await setShipAgencyFee({
        shipAgencyId: row.shipAgencyId,
        customerId: this.formData.customerId,
        fee: this.myFee,
        import: mo
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.cancelCol(row.id)
        this.getshipAgencyFeeList(2)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 弹窗
    async boxingFeeX (row, str) {
      this.yardCom = row
      this.shipId = str
      this.customerid = this.formData.customerId
      this.$store.commit('show_boxing_fee_dialog')
    },
    // 切换用箱人
    myChange () {
      this.getshipAgencyFeeList(2)
      this.getServiceFee(2)
    },
    // 关闭
    cancelCol (id) {
      this.$refs[id].doClose()
    },
    cancelCol_ship (row) {
      this.$refs[row].doClose()
    },
    tableRowClass ({row, column, rowIndex, columnIndex}) {
      if (column.label === '放箱协议费' || column.label === '收入' || column.label === '支出' || column.label === '20(默认)' || column.label === '40(默认)' || column.label === '45(默认)') {
        return 'color: #3c8dbc'
      }
    },
    // 获取客户信息
    async SearchUserInfo () {
      const res = await SearchUserInfo({
        page: 1,
        num: 10000
      })
      if (res.status === 200) {
        this.userInfo = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 搜索
    searchShipAgencyFeeList () {
      let search = this.formData.searchMent.toLowerCase()
      let arr = []
      if (search === '') {
        this.getshipAgencyFeeList(2)
        return false
      }
      this.tableData.map(item => {
        if (item.text.toLowerCase().indexOf(search) !== -1 || item.fee.indexOf(search) !== -1) {
          arr.push(item)
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.tableData = arr
    },
    // 获取船公司列表
    async getCompanyList (row) {
      const res = await boatCompanyList({
        nameCncode: ''
      })
      if (res.status === 200) {
        this.companyList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取堆场列表
    async getYardList (row) {
      const res = await yardList({
        yardName: ''
      })
      if (res.status === 200) {
        this.yardList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 点击船公司费用
    setFees (row, column, cell, event) {
      if (column.label === '收入') {
        this.comFee = row.importBillFee
      } else if (column.label === '支出') {
        this.comFee = row.expndBillFee
      } else if (column.label === '20(默认)') {
        this.comFee = row.pickBoxFee20
      } else if (column.label === '40(默认)') {
        this.comFee = row.pickBoxFee40
      } else if (column.label === '45(默认)') {
        this.comFee = row.pickBoxFee45
      }
    },
    // 点击协议费
    setmyFees (row, column, cell, event) {
      if (column.label === '放箱协议费') {
        this.myFee = row.fee
      }
    },
    // 设置船代和船公司关联
    async setBoatCompany (row) {
      const res = await setboatCompany({
        shipComId: this.boatCompany,
        shipAgency: row.shipAgencyId
      })
      if (res.status === 200) {
        this.getshipAgencyFeeList(2)
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 设置船公司费用
    async setComFee (row, pow, tp) {
      if (/(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/.test(this.comFee)) {
      } else {
        this.$message({
          message: '请输入正确的费用格式',
          type: 'warning'
        })
        return false
      }
      const res = await setComFee({
        shipAgencyId: pow.shipAgencyId,
        boatComId: row.boatComId,
        fee: this.comFee,
        feeType: tp,
        customerId: this.formData.customerId
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        switch (tp) {
          case 0:
            row.importBillFee = this.comFee
            this.cancelCol_ship(row.nameCn)
            break
          case 1:
            row.expndBillFee = this.comFee
            this.cancelCol_ship(row.BoatCompanyFeeId)
            break
          case 2:
            row.pickBoxFee20 = this.comFee
            this.cancelCol_ship(row.boatComId)
            break
          case 3:
            row.pickBoxFee40 = this.comFee
            this.cancelCol_ship(row.code)
            break
          case 4:
            row.pickBoxFee45 = this.comFee
            this.cancelCol_ship(row.nameCncode)
            break
        }
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    selectStar (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchUserInfo()
        }, 500)
      }
    },
    // 设置服务费
    async setServiceFee () {
      if (/^[0-9]+\d*(\.\d{0,2})?$|^0?\.\d{0,2}$/.test(this.formData.money)) {
      } else {
        this.$message({
          showClose: true,
          message: '请输入正确的费用格式',
          type: 'error'
        })
        return false
      }
      const res = await serviceFee({
        money: this.formData.money,
        customerId: this.formData.customerId
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getshipAgencyFeeList(2)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="less">
</style>
